<template>
  <a-drawer
    title="字段设置"
    width="400px"
    :visible="visible"
    :body-style="{ paddingBottom: '70px' }"
    @close="close"
  >
    <h4>可见字段</h4>
    <draggable v-model="list" item-key="index">
      <template #item="{ element, index }">
        <a-row class="item cp">
          <span>{{ index + 1 }}. {{ element.title }}</span>
          <a @click="delItem(index)">删除</a>
        </a-row>
      </template>
    </draggable>

    <a-divider />

    <h4>可添加字段</h4>
    <ul>
      <li class="item" v-for="(item, index) in planList" :key="item.key">
        <span>{{ item.title }}</span>
        <a @click="addItem(index)">添加</a>
      </li>
    </ul>

    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button style="margin-right: 8px" @click="reset">重置</a-button>
      <a-button type="primary" @click="submit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import draggable from 'vuedraggable'
import { cloneDeep } from 'lodash-es'

export default {
  components: { draggable },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    },
    localName: {
      type: String,
      default: ''
    }
  },

  setup(props, { emit }) {
    const state = reactive({
      list: [],
      planList: []
    })

    const initData = () => {
      const data = JSON.parse(localStorage.getItem(props.localName)) || []

      if (data?.length > 0) {
        data.forEach(_ => {
          props.columns.forEach(item => {
            if (_ === item.title) {
              state.list.push(item)
            }
          })
        })
        props.columns.forEach(item => {
          if (!data.includes(item.title)) {
            state.planList.push(item)
          }
        })
      } else {
        state.list = cloneDeep(props.columns)
        state.planList = []
      }
    }

    watch(
      () => props.visible,
      newVal => {
        if (newVal) {
          initData()
        } else {
          state.list = []
          state.planList = []
        }
      }
    )

    const addItem = index => {
      state.list.push(state.planList[index])
      state.planList.splice(index, 1)
    }

    const delItem = index => {
      state.planList.push(state.list[index])
      state.list.splice(index, 1)
    }

    const reset = () => {
      localStorage.removeItem(props.localName)

      close()
      emit('reload')
    }

    const submit = () => {
      const localData = state.list.map(item => item.title)
      localStorage.setItem(props.localName, JSON.stringify(localData))

      close()
      emit('reload')
    }

    const close = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(state),
      addItem,
      delItem,
      reset,
      submit,
      close
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin: 8px 0;
  span {
    color: rgba(0, 0, 0, 0.6);
  }
  a {
    margin-left: 15px;
  }
}
.cp {
  cursor: pointer;
}
</style>
